<!--suppress HtmlDeprecatedAttribute -->
<template>
  <div>
    <good-produce-add-dialog v-model="addDialogVisible" :good-id="goodId" @change="freshData"/>
    <good-produce-text-edit-dialog v-model="dialogTextVisible" :good-id="goodId"
                                   :data="editSelect" @change="freshData"/>
    <good-produce-rich-text-edit-dialog v-model="dialogRichTextVisible" :good-id="goodId"
                                        :data="editSelect" @change="freshData"/>
    <good-produce-img-edit-dialog v-model="dialogImageVisible" :good-id="goodId"
                                  :data="editSelect" @change="freshData"/>
    <good-produce-show-dialog v-model="dialogShowVisible" :list="produceList"/>
    <store-good-selector @change="goodInfoChange"/>
    <xum-title title="商品介绍">
      <el-button type="info" size="small" :loading="queryLoading" :disabled="!haveGood"
                 icon="el-icon-refresh" @click="freshData"/>
      <el-button type="info" size="small" @click="handleShowProduce"
                 :disabled="!haveGood || !tableData">预览</el-button>
      <el-button type="danger" size="small" @click="handleRemoveMore"
                 :disabled="!haveGood || !tableData || tableData.length <= 0 || !selection ||
                 selection.length <= 0">删除</el-button>
      <el-button type="primary" size="small" :disabled="!haveGood || addDialogVisible"
                 @click="addGoodProduce">添加</el-button>
    </xum-title>
    <div class="table">
      <el-table ref="table" :data="tableData" style="width: 100%" height="430"
                v-loading='queryLoading' @selection-change="handleSelectionChange" :border="true"
                :default-sort="{prop: 'sortNumber', order: 'ascending'}">
        <el-table-column type="selection" align="center" width="50" fixed="left"/>
        <el-table-column prop="id" align="center" label="编号" resizable/>
        <el-table-column prop="contentType" align="center" :sortable="true" label="类型"
                         :formatter="contentTypeFormatter" resizable/>
        <el-table-column prop="linkGoodId" align="center" label="链接商品编号"
                         :formatter="noneFormatter" resizable/>
        <el-table-column prop="linkSubGoodId" align="center" label="链接子商品编号"
                         :formatter="noneFormatter" resizable/>
        <el-table-column prop="linkUrl" align="center" :sortable="true" label="链接地址"
                         :formatter="noneFormatter" resizable/>
        <el-table-column prop="sortNumber" align="center" :sortable="true" label="排序号" resizable/>
        <el-table-column prop="remark" align="center" label="备注" :formatter="noneFormatter" resizable/>
        <el-table-column label="操作" align="center" fixed="right" resizable>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleRemove(scope.row)"
                       class="xum-color-remove">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import StoreGoodSelector from '@pages/goods/part/StoreGoodSelector'
import XumTitle from '@/components/XumTitle'
import { queryGoodProduceWrapperPage, removeGoodProduceByIds } from '@/api/ApiGoodProduce'
import { ResultCode } from '@/constants/constants'
import GoodProduceAddDialog from '@pages/goods/part/pageGoodProduce/GoodProduceAddDialog'
import PageDTO from '@/api/entity/PageDTO'
import GoodProduceQueryDTO from '@/api/entity/GoodProduceQueryDTO'
import GoodProduceTextEditDialog from '@pages/goods/part/pageGoodProduce/GoodProduceTextEditDialog'
import GoodProduceRichTextEditDialog from '@pages/goods/part/pageGoodProduce/GoodProduceRichTextEditDialog'
import GoodProduceImgEditDialog from '@pages/goods/part/pageGoodProduce/GoodProduceImgEditDialog'
import GoodProduceShowDialog from '@pages/goods/part/pageGoodProduce/GoodProduceShowDialog'
export default {
  name: 'PageGoodProduce',
  components: {
    GoodProduceShowDialog,
    GoodProduceImgEditDialog,
    GoodProduceRichTextEditDialog,
    GoodProduceTextEditDialog,
    GoodProduceAddDialog,
    XumTitle,
    StoreGoodSelector },
  data () {
    return {
      good: null,
      queryLoading: false,
      addDialogVisible: false,
      dialogTextVisible: false,
      dialogRichTextVisible: false,
      dialogImageVisible: false,
      dialogShowVisible: false,
      produceList: [],
      selection: null,
      editSelect: null
    }
  },
  computed: {
    haveGood () {
      return this.good && this.good.id && this.good.id > 0
    },
    goodId () {
      return this.haveGood ? this.good.id : 0
    },
    tableData () {
      return this.produceList
    }
  },
  methods: {
    /**
     * 商品信息改变，刷新列表
     */
    goodInfoChange (val) {
      this.good = val
      this.freshData()
    },
    /**
     * 刷新数据
     */
    freshData () {
      if (!this.haveGood) {
        return
      }
      this.queryLoading = true
      this.produceList = []
      const pageDTO = PageDTO.instance()
      pageDTO.setCurrent(1)
      pageDTO.setSize(100)
      const wrapper = GoodProduceQueryDTO.instance()
      wrapper.setGoodId([this.goodId])
      wrapper.addOrderAsc('orderNumber')
      wrapper.addOrderAsc('createTime')
      pageDTO.setCondition(wrapper)
      queryGoodProduceWrapperPage(pageDTO, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object['records']
          this.produceList = data
        }
      }, () => {
        this.queryLoading = false
      })
    },
    /**
     * 格式化数据，为空时显示无
     */
    noneFormatter (row, column, cellValue) {
      return cellValue || '无'
    },
    /**
     * 类型显示转换
     */
    contentTypeFormatter (row, column, cellValue) {
      if (cellValue) {
        switch (cellValue) {
          case 'TEXT':
            return '普通文本'
          case 'RICH_TEXT':
            return '富文本'
          case 'PICTURE':
            return '图片类型'
        }
      }
      return '无'
    },
    /**
     * 添加一条新的数据
     */
    addGoodProduce () {
      this.addDialogVisible = true
    },
    /**
     * 选择发生改变回调，同步数据
     * @param val 选择的数据，数组
     */
    handleSelectionChange (val) {
      this.selection = val
    },
    /**
     * 编辑
     */
    handleEdit (val) {
      if (val) {
        this.editSelect = val
        this.dialogImageVisible = false
        this.dialogTextVisible = false
        this.dialogRichTextVisible = false
        switch (val.contentType) {
          case 'PICTURE':
            this.dialogImageVisible = true
            break
          case 'TEXT':
            this.dialogTextVisible = true
            break
          case 'RICH_TEXT':
            this.dialogRichTextVisible = true
            break
        }
      }
    },
    /**
     * 删除数据
     * @param {Array<Number|String>} ids id数组
     */
    remove (ids) {
      this.$confirm('你正在执行删除商品介绍操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (ids && ids.length > 0) {
          removeGoodProduceByIds(ids, data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('移除成功')
              this.freshData()
            }
          }, () => {
          })
        }
      }).catch(() => {
      })
    },
    /**
     * 删除
     */
    handleRemove (val) {
      if (val && val.id) {
        const ids = [val.id]
        this.remove(ids)
      }
    },
    /**
     * 删除选择的多个
     */
    handleRemoveMore () {
      if (this.selection && this.selection.length > 0) {
        const ids = []
        this.selection.forEach(item => {
          ids.push(item.id)
        })
        this.remove(ids)
      } else {
        this.$message.error('请先选择希望删除的数据')
      }
    },
    /**
     * 打开预览对话框
     */
    handleShowProduce () {
      this.dialogShowVisible = true
    }
  }
}
</script>

<style scoped>

</style>
